<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" href="static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" >
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">品牌名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="brandName" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="brandFormSubmit"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
                <i class="layui-icon layui-icon-add-1"></i>
                新增
            </button>
            <%--<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
                <i class="layui-icon layui-icon-delete"></i>
                删除
            </button>--%>
        </script>
        <div class="layui-card">
            <div class="layui-card-body">
                <table id="brand-table" lay-filter="brandToolbar" class="layui-hide"></table>
            </div>
        </div>


    </div>

</div>

</body>
<script type="text/html" id="brandToolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
        <i class="layui-icon layui-icon-add-1"></i>
        新增
    </button>
</script>
<script type="text/html" id="brandTool">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="update"><i
            class="layui-icon layui-icon-edit"></i></button>
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete"><i
            class="layui-icon layui-icon-delete"></i></button>
</script>
<script src="static/component/layui/layui.js"></script>
<script src="static/component/pear/pear.js"></script>

<script>
    layui.use(['table', 'form', 'jquery', 'dtree'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;


        let cols = [
                [
                    {
                        title: '品牌编号',
                        field: 'brandId',
                        align: 'center'
                    },
                    {
                        title: '品牌名称',
                        field: 'brandName',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        toolbar:'#brandTool'
                    }
                ]
            ];
        //对表格进行渲染
        table.render({
            elem: '#brand-table',
            url: 'brand/selectLikeBrand',
            cols:cols,
            method:'post',
            page:true,
            limits:[1,5,10],
            toolbar: '#brandToolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });



        //修改删除按钮事件
        table.on('tool(brandToolbar)',function (obj){
            if (obj.event==="update"){
                //执行修改
                layer.open({
                    //执行修改用户操作
                    title: '修改品牌信息',
                    type: 2,
                    shade: 0.1,
                    area: ['32%', '20%'],
                    content: 'brand/skipUpdateBrand?brandId='+obj.data.brandId
                })
            }else{
                //删除
                //执行删除
                layer.confirm('真的要删除吗？',function(index){
                    $.post('brand/deleteBrand',{"brandId":obj.data.brandId},function(result){
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function(index){
                                //执行重载
                                table.reload('brand-table');
                                layer.close(index);
                            });
                        }
                    });

                })
            }

        });

        //添加按钮事件
        table.on('toolbar(brandToolbar)',function (obj){
            if (obj.event==="add"){
                //执行修改
                layer.open({
                    //执行修改用户操作
                    title: '添加品牌信息',
                    type: 2,
                    shade: 0.1,
                    area: ['32%', '20%'],
                    content: 'brand/skipAddBrand'
                })
            }

        });
        //表单提交事件
        form.on("submit(brandFormSubmit)",function (data){    //规定默认第几页
            //执行搜索重载
            table.reload('brand-table',{
                //规定默认第几页
                page:{
                    curr:1
                },
                where:{
                    //添加请求参数
                    brandName:data.field.brandName
                }

            });
            return false;
        })
    })

</script>
</body>
</html>